<template>
  <div class="app-container">

    <div>

      <div>
        <p style="padding-left:0;">批量生成考勤记录（以天为单位）</p>
        <p style="padding-left:0;">结束日期可选，如果为空，则生成单个日期指定部门的考勤记录</p>
        <p style="padding-left:0;color: darkred">起始日期与结束日期必须在同一月份！否则只生成起始日期单天的考勤记录</p>
        <!--        <span class="demonstration">请选择日期：/span>-->
        <div>

          <div>
            <span>1：</span>
            <el-select v-model="departId" placeholder="请选择部门">
              <el-option label="皇室" value="1"/>
              <el-option label="范家" value="2"/>
              <el-option label="暗探" value="3"/>
              <el-option label="监察院" value="4"/>
            </el-select>
          </div>
          <br>
          <div>
            <span>2：</span>
            <el-date-picker
              v-model="dateVal"
              :default-time="['00:00:00', '00:00:00']"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="请选择开始日期"
              end-placeholder="请选择结束日期"
              placeholder="默认则导出所有年月份工资信息"/>
          </div>
        </div>

      </div>

      <br>

      <div style="margin-top: 20px">
        <el-button
          :loading="genLoading"
          style="margin:0 0 20px 20px;"
          type="primary"
          plain
          icon="el-icon-document"
          @click="handleGen">
          生成记录
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>/* eslint-disable indent */

import { genAttendRecords } from '../../../../api/attend'

export default {
  filters: {},
  data() {
    return {
      filename: '',
      dateVal: '',
      departId: '',
      genLoading: false
    }
  },
  created() {
    this.fetchDepartmentData()
  },
  methods: {
    fetchDepartmentData() {

    },
    handleGen() {
      if (this.departId === '') {
        this.$message.error('请选择部门')
        return
      }

      const obj = this.dateVal
      const startDate = obj[0]
      if (startDate == null) {
        this.$message.error('请至少选择起始日期')
        return
      }
      const endDate = obj[1]
      const that = this
      this.$confirm('此操作将重新生成已有指定日期[范围]的考勤记录且不可撤销, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async() => {
        that.genLoading = true
        const result = await genAttendRecords(this.departId, startDate, endDate)
        if (result.success) {
          that.genLoading = false
          that.$notify({
            title: '考勤记录生成成功',
            message: '总计删除【' + result.message + '】条记录，新增【' + result.code + '】条记录',
            duration: 0,
            type: 'success'
          })
        } else {
          that.genLoading = false
          that.$notify({
            title: '提示',
            message: '记录生成失败, ' + result.message,
            duration: 0,
            type: 'error'
          })
        }
      }).catch(() => {
        that.genLoading = false
      })
    }

  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .expanded_input {
    width: 555px;
  }
</style>
